import React from "react";
import {
  Card,
  Table,
  Button,
  Form,
  Select,
  Modal,
  message,
  DatePicker
} from "antd";
import axios from "@/axios/index"; //封装的ajax
import Utils from "../../utils/utils"; //时间 分页
import BaseForm from "../../components/BaseForm"; //封装的表单
import "@/style/common.less";
const FormItem = Form.Item;
const Option = Select.Option;

export default class Order extends React.Component {
  constructor() {
    super();
    this.state = {
      orderInfo: {},
      orderConfirmVisble: false
    };
  }

  params = {
    page: 1
  };

  formList = [
    {
      type: "SELECT",
      label: "城市",
      field: "city_id",
      placeholder: "全部",
      initialValue: "1",
      width: 100,
      list: [
        { id: "0", name: "全部" },
        { id: "1", name: "北京" },
        { id: "2", name: "天津" },
        { id: "3", name: "深圳" }
      ]
    },
    {
      type: "时间查询"
    },
    {
      type: "SELECT",
      label: "订单状态",
      field: "op_mode",
      placeholder: "全部",
      initialValue: "1",
      width: 100,
      list: [
        { id: "0", name: "全部" },
        { id: "1", name: "进行中" },
        { id: "2", name: "结束行程" }
      ]
    }
  ];

  //初始化
  componentDidMount() {
    this.requestList();
  }

  //点击行触发的方法
  onRowClick = (record, index) => {
    let selectKey = [index];
    this.setState({
      selectedRowKeys: selectKey, //选中行的索引
      selectedItem: record //选中行的对象 ,不写这句不显示 checked
    });
  };

  //订单详情按钮
  openOrderDetail = () => {
    let index = this.state.selectedRowKeys;
    // 根据选中的索引判断
    if (!index) {
      Modal.info({
        title: "信息",
        content: "请选择一条订单进行查看"
      });
      return;
    }
    window.open(`/#/common/order/detail/${index[0] + 1}`, "_blank"); //打开新页面

    // window.location.href=`/#/common/order/detail/${item.id}` //跳转
  };

  //订单结束按钮
  handleConfirm = () => {
    let item = this.state.selectedItem;
    if (!item) {
      Modal.info({
        title: "信息",
        content: "请选择一条订单进行结束"
      });
      return;
    }
    axios
      .ajax({
        url: "/order/ebike_info",
        data: {
          params: {
            orderId: order_sn
          }
        }
      })
      .then(res => {
        if (res.code == 0) {
          this.setState({
            orderInfo: res.result,
            orderConfirmVisble: true //弹出框显示
          });
          this.requestList();
        }
      });
  };

  //订单结束弹出框按钮
  handleFinishOrder = () => {
    let item = this.state.selectedItem;
    axios
      .ajax({
        url: "/order/finish_order",
        data: {
          params: {
            orderId: item.id
          }
        }
      })
      .then(res => {
        if (res.code == 0) {
          message.success("结束行程完毕");
          this.setState({
            orderConfirmVisble: false
          });
          this.requestList();
        }
      });
  };

  //调用axios封装的 formList 
  requestList = () => {
    axios.requestList(this,"order/list",this.params,true) //true 是自定义的moke数据
    // let _this = this;
    // axios
    //   .ajax({
    //     url: "order/list",
    //     data: {
    //       params: this.params
    //       }
    //     })
    //   .then(res => {
    //     this.setState({
    //       list: res.result.item_list.map((item, index) => {
    //         item.key = index;
    //         return item;
    //       }),
    //       pagination: Utils.pagination(res, current => {
    //         _this.params.page = current;
    //         _this.requestList();
    //       })
    //     });
    //   });
  };

  handleFilter = (params) => {
    this.params = params;
    this.requestList();
  };

  render() {
    //表头
    const columns = [
      {
        title: "订单编号",
        dataIndex: "order_sn"
      },
      {
        title: "车辆编号",
        dataIndex: "bike_sn"
      },
      {
        title: "用户名",
        dataIndex: "user_name"
      },
      {
        title: "手机号",
        dataIndex: "mobile"
      },
      {
        title: "里程",
        dataIndex: "distance"
      },
      {
        title: "行驶时长",
        dataIndex: "total_time"
      },
      {
        title: "状态",
        dataIndex: "status"
      },
      {
        title: "开始时间",
        dataIndex: "start_time"
      },
      {
        title: "结束时间",
        dataIndex: "end_time"
      },
      {
        title: "订单金额",
        dataIndex: "total_fee"
      },
      {
        title: "实付金额",
        dataIndex: "user_pay"
      }
    ];

    //弹出框layout
    const formItemLayout = {
      labelCol: { span: 5 },
      wrapperCol: { span: 19 }
    };

    //点击单选按钮触发onChange
    const selectedRowKeys = this.state.selectedRowKeys;
    const rowSelection = {
      type: "radio",
      selectedRowKeys, //官方api 指定选中key数组 和 onChange配合使用
      onChange: selectedRowKeys => {
        this.setState({
          selectedRowKeys //哪一行
        });
      }
    };

    //页面渲染
    return (
      <div>
        <Card title="订单管理">
          <BaseForm formList={this.formList} filterSubmit={this.handleFilter} />
        </Card>
        <Card style={{ marginTop: 10 }}>
          <Button type="primary" onClick={this.openOrderDetail}>
            订单详情
          </Button>
          <Button
            type="primary"
            style={{ marginLeft: 10 }}
            onClick={this.handleConfirm}
          >
            结束订单
          </Button>
        </Card>
        <div className="wrap-content">
          <Table
            bordered
            rowSelection={rowSelection}
            onRow={(record, index) => {
              return {
                //点击行
                onClick: () => {
                  this.onRowClick(record, index);
                }
              };
            }}
            columns={columns}
            dataSource={this.state.list}
            pagination={this.state.pagination}
          />
        </div>
        <Modal
          title="结束订单"
          visible={this.state.orderConfirmVisble}
          onCancel={() => {
            this.setState({
              orderConfirmVisble: false
            });
          }}
          onOk={this.handleFinishOrder}
          width={600}
        >
          <Form layout="horizontal">
            <FormItem label="车辆编号" {...formItemLayout}>
              {this.state.orderInfo.bike_sn}
            </FormItem>
            <FormItem label="剩余电量" {...formItemLayout}>
              {this.state.orderInfo.battery + "%"}
            </FormItem>
            <FormItem label="行程开始时间" {...formItemLayout}>
              {this.state.orderInfo.start_time}
            </FormItem>
            <FormItem label="当前位置" {...formItemLayout}>
              {this.state.orderInfo.location}
            </FormItem>
          </Form>
        </Modal>
      </div>
    );
  }
}

// //搜索筛选组件
// class FilterForm extends React.Component {
//   render() {
//     const { getFieldDecorator } = this.props.form;
//     return (
//       <Form layout="inline">
//         <FormItem label="城市">
//           {getFieldDecorator("city_id")(
//             <Select style={{ width: 100 }} placeholder="全部">
//               <Option value="">全部</Option>
//               <Option value="1">北京市</Option>
//               <Option value="2">天津市</Option>
//               <Option value="3">深圳市</Option>
//             </Select>
//           )}
//         </FormItem>
//         <FormItem label="订单时间">
//           {getFieldDecorator("start_time")(
//             <DatePicker showTime format="YY-MM-DD HH:mm:ss" />
//           )}
//           {getFieldDecorator("end_time")(
//             <DatePicker
//               style={{ marginLeft: 10 }}
//               showTime
//               format="YY-MM-DD HH:mm:ss"
//             />
//           )}
//         </FormItem>
//         <FormItem label="订单状态">
//           {getFieldDecorator("op_mode")(
//             <Select style={{ width: 80 }} placeholder="全部">
//               <Option value="">全部</Option>
//               <Option value="1">进行中</Option>
//               <Option value="2">结束行程</Option>
//             </Select>
//           )}
//         </FormItem>

//         <FormItem>
//           <Button type="primary" style={{ margin: "0 20px" }}>
//             查询
//           </Button>
//           <Button>重置</Button>
//         </FormItem>
//       </Form>
//     );
//   }
// }
// //通过Form.create实现双向绑定
// FilterForm = Form.create({})(FilterForm);
